<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>主题</title>
    <link href="__STATIC__/component/pear/css/pear.css" rel="stylesheet"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body" style="padding:0;">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li><a href="{:url('index')}">本地主题</a></li>
                <li class="layui-this"><a href="{:url('online')}">在线主题</a></li>
                <li class="tab-add"><a href="{:url('add')}"><i class="layui-icon layui-icon-add-1"></i></a></li>
            </ul>
        </div>

        <blockquote class="layui-elem-quote" style="margin-top:10px;">(测试中...) 购买主题请联系主题作者。</blockquote>

        <div id="currentTableId"></div>
    </div>
</div>

<script src="__STATIC__/component/layui/layui.js"></script>
<script src="__STATIC__/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery', 'card', 'aphp'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let card = layui.card;
        let aphp = layui.aphp;

        card.render({
            elem: '#currentTableId',
            url: "{:url('online')}", // 接口数据
            data: [], // 静态数据
            page: true, // 是否分页
            limit: 12, // 每页数量
            linenum: 6, // 每行数量
            response: {
                statusName: 'code', // 状态字段名称
                statusCode: 200, // 状态码
            }
        })


        // 使用设置
        $(document).on('click', "[data-event='theme_set']", function () {
            let name = $(this).data('id');
            let url = "{:url('use')}?name=" + name;
            aphp.request.getConfirm(url, '确定要使用主题 '+ name +' 吗?', 1);
            return false;
        });
        // 主题安装
        $(document).on('click', "[data-event='theme_install']", function () {
            let name = $(this).data('id');
            let url = "{:url('install')}?name=" + name;
            layer.confirm('确定要安装主题 '+ name +' 吗?', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                var loadIndex = layer.msg('安装主题中，请耐心等待……', {icon: 16, time: 60000});
                $.get(url, function (ret) {
                    if (ret.status === 1) {
                        layer.alert(ret.msg, {icon: 1, title: '提示'}, function () { window.location.href = ret.url; });
                    } else {
                        layer.alert(ret.msg, {icon: 2, title: '提示'});
                    }
                    layer.close(loadIndex);
                }, 'json');
            });
            return false;
        });
        // 主题卸载
        $(document).on('click', "[data-event='theme_uninstall']", function () {
            let name = $(this).data('id');
            let url = "{:url('uninstall')}?name=" + name;
            layer.confirm('确定要卸载主题 '+ name +' 吗?', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                var loadIndex = layer.msg('卸载主题中，请耐心等待……', {icon: 16, time: 60000});
                $.get(url, function (ret) {
                    if (ret.status === 1) {
                        layer.alert(ret.msg, {icon: 1, title: '提示'}, function () { window.location.reload(); });
                    } else {
                        layer.alert(ret.msg, {icon: 2, title: '提示'});
                    }
                    layer.close(loadIndex);
                }, 'json');
            });
            return false;
        });

    })
</script>
</body>
</html>